{include file="public/header" /}
<link rel="stylesheet" href="/static/index/css/page/product-details.css">
<body>
<div class="build-navbar" data-title="商品详情" data-leftbg data-transparent></div>
<div class="main">
    <div class="carousel">
        <div class="layui-carousel " id="carousel">
            <div carousel-item>
                {foreach name="$info.images" item="vo"}
                <div><img src="{$vo}" alt=""></div>
                {/foreach}
            </div>
        </div>
    </div>
    <div class="pos-box">

        <div class="card">
            <div class="price flex items-center">
                <div class="vip-price front">{$info.vip_price}</div>
                <div class="price">￥{$info.price}</div>
            </div>
            <div class="title">{$info.title}</div>
            <div class="desc flex items-center justify-between">
                <div>销量{$info.sales}</div>
                <div>库存{$info.stock}</div>
            </div>
        </div>

        <div class="multi mt-30">
            {if $info.spec}
            <div class="spec item flex justify-between items-center" lay-on="show">
                <div class="title">规格</div>
                <div class="flex-auto value pick-spec-val">点击选择规格</div>
                <img src="/static/index/images/product/more.png" alt="">
            </div>
            {/if}
            <div class="freight item flex justify-between items-center">
                <div class="title">运费</div>
                <div class="flex-auto value">￥10.00</div>
            </div>
        </div>

        <div class="holder-title my-30 flex items-center justify-center">商品详情</div>

        <div class="content">{:htmlspecialchars_decode($info['content'])}</div>
    </div>

    <div class="pro-footer flex items-center justify-between">
        <div class="cart-box flex flex-col items-center" lay-event="jump" lay-url="{:url('cart/index')}">
            <img src="/static/index/images/product/cart.png" alt="">
            <span class="title">购物车</span>
            {if $count > 0}
            <span class="badge">{$count}</span>
            {/if}
        </div>
        <div class="flex items-center justify-around">
            <div class="add-cart" lay-on="show">加入购物车</div>
            <div class="payment" lay-on="show">立即购买</div>
        </div>
    </div>
    <div class="model-mdl p-30">
        <img src="{$info.icon}" alt="" class="icon">
        <div class="flex items-start top flex-col">
            <div class="vip-price front vip_price">{$info.vip_price}</div>
            <div class="stock">库存<span class="stock-val">234</span></div>
        </div>
        {if $info.spec}
        <div class="spec-scope">
            {foreach name="$info.spec" key="key" item="vo"}
            <div class="spec">
                <div class="title pt-30">{$vo.title}</div>
                <div class="pt-30 container">
                    {foreach name="$vo.child" item="child" key="index"}
                    <div class="item {$index == 0 ? 'lay-this' : ''}" data-index="{$key}" data-val="{$child.title}"
                         lay-change="pickSpec">{$child.title}
                    </div>
                    {/foreach}
                </div>
            </div>
            {/foreach}
        </div>
        {/if}

        <div class="num-scope flex items-center justify-between">
            <div class="title">数量</div>
            <div class="edit flex items-center justify-center">
                <div lay-on="minus" class="minus"><i class="layui-icon layui-icon-subtraction"></i></div>
                <div class="val">1</div>
                <div lay-on="plus" class="plus"><i class="layui-icon layui-icon-addition"></i></div>
            </div>
        </div>

        <div class="btn-scope">
            <div class="flex items-center justify-around">
                <div class="add-cart" lay-click="addCart">加入购物车</div>
                <div class="payment" lay-click="payment">立即购买</div>
            </div>
        </div>

    </div>
</div>
</body>
{include file="public/footer" /}
<script>
    layui.use(['methods', 'listen'], function () {
        var a = layui.jquery, methods = layui.methods, listen = layui.listen, ly = layui.layer, u = layui.util,
            pickSpec = [];

        init()
        //初始化回到顶部模块，可选，如不需要无需初始化
        listen.initTopFixBar();

        methods.event.click(['addCart', 'payment']
            , function () {
                methods.fetchPostThrottle("{:url('cart/add')}", {
                    pid: "{$info.id}",
                    num: a('.val').text(),
                    spec: pickSpec.length > 0 ? pickSpec.join(',') : ''
                }, function (d) {
                    d.code === 1 ? (d.url ? location.href = d.url : ly.msg(d.msg)) : ly.msg(d.msg);
                })
            }
            , function () {
                methods.fetchPostThrottle("{:url('product/submit')}", {
                    pid: "{$info.id}",
                    num: a('.val').text(),
                    spec: pickSpec.length > 0 ? pickSpec.join(',') : ''
                }, function (d) {
                    d.code === 1 ? (d.url ? location.href = d.url : ly.msg(d.msg)) : ly.msg(d.msg);
                })
            }
        );

        u.on({
            show: function () {
                methods.popupSlideUp(a('.model-mdl'));
            },
            minus: function () {
                var val = parseInt(a('.val').text());
                a('.val').text(val > 1 ? val - 1 : 1);
            },
            plus: function () {
                var val = parseInt(a('.val').text());
                a('.val').text(val + 1);
            }
        })

        function init() {
            methods.renderCarousel('#carousel');
            a('.spec-scope .spec').each(function (index, item) {
                pickSpec[index] = a(item).find('.lay-this').text().trim();
            });
            renderPickSpec();
            methods.event.change('pickSpec', function (data, that) {
                pickSpec[parseInt(data.index)] = data.val;
                methods.fetchGet('{:url("product/getSpecPrice")}', {
                    pid: '{$info.id}',
                    spec: pickSpec.length > 0 ? pickSpec.join(',') : ''
                }, function (d) {
                    if (d.code === 1) {
                        a('.icon').attr('src', d.data.icon);
                        a('.vip_price').text(d.data.vip_price)
                        a('.stock-val').text(d.data.stock)
                        renderPickSpec();
                    } else {
                        ly.msg(d.msg);
                    }
                }, false)
            });
        }

        function renderPickSpec() {
            pickSpec.length > 0 ? a('.pick-spec-val').text(pickSpec.join('，')) : '';
        }


    });
</script>
</html>